<template>
  <div class="left-menu">
    <div class="head">
      <el-select
        class="box"
        v-model="typeData"
        placeholder="所有设备类型"
        clearable
        @change="updateList"
        @clear="updateList"
      >
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-input
        class="box"
        v-model="searchTxt"
        @keyup.enter.native="updateList"
        clearable
        @clear="updateList"
        placeholder="查找物模型名称"
      ></el-input>
    </div>
    <div class="content scroll-bar">
      <div
        class="model-item"
        v-for="(item, index) in listData"
        :key="'model_' + index"
        :class="checkItem === item.id ? 'check' : ''"
        @click="selectItem(item)"
      >
        <span>{{ item.name }} {{ item.variableNum ? `(${item.variableNum})` : '' }}</span>
      </div>
    </div>
    <div class="foot">
      <el-pagination
        @prev-click="switchPage('prev')"
        @next-click="switchPage('next')"
        @current-change="switchPage"
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="sourceData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getModelList } from '../../../api/rule';
export default {
  name: 'leftMenu',
  props: ['type', 'modelId'],
  data() {
    return {
      // 类型
      options: [
        { label: '搬运类', value: 1 },
        { label: '输送类', value: 2 },
        { label: '包装类', value: 3 },
        { label: '其他类', value: 4 }
      ],
      typeData: '', // 类型绑定数据
      page: 1,
      pageSize: 15,
      checkItem: 0, // 当前选中物模型
      listData: [], // 当前展示物模型数据
      sourceData: [], // 原始物模型数据
      searchTxt: '', // 查询
      isSelect: false
    };
  },
  mounted() {
    this.getModelData();
  },
  methods: {
    // 获取物模型数据
    getModelData(obj) {
      const param = Object.assign({}, { type: this.type }, obj);
      getModelList(param).then(res => {
        let clickItem = false;
        let temp = [];
        const list = res.data;
        this.sourceData = res.data;
        for (let i = 0, len = list.length; i < len; i++) {
          const item = list[i];
          if (this.isSelect) {
            if (i < this.pageSize) {
              temp.push(item);
            }
            if (this.modelId) {
              if (item.id === this.modelId) {
                clickItem = item;
              }
            }
          } else {
            if (this.modelId) {
              if (item.id === this.modelId) {
                temp = [];
                const selectPage = Math.floor((i + 1) / this.pageSize);
                const max = (selectPage + 1) * this.pageSize > len ? len : (selectPage + 1) * this.pageSize;
                for (let j = selectPage * this.pageSize; j < max; j++) {
                  temp.push(list[j]);
                }
                i = len;
                this.page = selectPage + 1;
                clickItem = item;
              } else {
                temp.push(item);
              }
            } else {
              temp.push(item);
            }
          }
        }
        this.listData = temp;
        if (clickItem) {
          this.selectItem(clickItem);
        } else {
          this.selectItem(temp[0]);
        }
      });
    },
    // 选中s
    selectItem(row) {
      this.isSelect = false;
      this.checkItem = row.id;
      this.$emit('clickModel', { id: row.id, name: row.name });
    },
    // 更新左侧列表
    updateList() {
      this.isSelect = true;
      this.getModelData({ id: this.typeData, name: this.searchTxt });
    },
    // 查询
    clearData() {},
    // 切页
    switchPage(type) {
      console.log('ype', type);
      let temp = [];
      if (type === 'prev') {
        if (this.page === 1) {
          this.$message({
            type: 'warning',
            message: '已经是第一页了'
          });
        } else {
          this.page -= 1;
        }
      } else if (type === 'next') {
        const max = Math.floor(this.sourceData.length / this.pageSize);
        if (this.page > max) {
          this.$message({
            type: 'warning',
            message: '已经是最后一页了'
          });
        } else {
          this.page += 1;
        }
      } else {
        this.page = type;
      }
      this.sourceData.forEach((item, index) => {
        if (index >= (this.page - 1) * this.pageSize && index <= this.page * this.pageSize) {
          temp.push(item);
        }
      });
      this.listData = temp;
    }
  }
};
</script>
<style lang="scss" scoped>
//通用
.box {
  width: 270px;
  margin-top: 15px;
}
.check {
  font-size: 14px;
  color: #3378ff !important;
}

.left-menu {
  position: relative;
  height: inherit;
  border-right: 1px solid #ebeef5;
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 117px;
    border-bottom: 1px solid #ebeef5;
  }
  .content {
    height: calc(100% - 165px);
    overflow: auto;
    .model-item {
      height: 48px;
      text-align: left;
      padding: 0 15px;
      line-height: 48px;
      font-size: 14px;
      cursor: pointer;
      color: #606266;
      border-bottom: 1px solid #ebeef5;
    }
  }
  .foot {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 48px;
    width: 100%;
  }
}
</style>
